<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 1000px;
				height: 600px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">
			<canvas id="canvasone" width="1000" height="600"></canvas>
			
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let oPen=oneCanvas.getContext('2d');
			
			oPen.beginPath();                         //  黑脸
			oPen.arc(400,200,150,0,Math.PI*2,true);
			oPen.stroke();;
			oPen.fillStyle='black';
			oPen.fill();
			oPen.closePath();
			
		
			oPen.beginPath();                                 //左眼
			oPen.arc(350,150,35,0,Math.PI*2,true);
			oPen.stroke();
			oPen.fillStyle='white';
			oPen.fill();
			oPen.closePath();
			
			
			oPen.moveTo(340,130);           // 左眼斜杠
			oPen.lineTo(370,150);
			oPen.moveTo(370,148);
			oPen.lineTo(340,170);
			oPen.lineWidth=5;
			oPen.stroke();
			
			
			
			oPen.beginPath();                     // 右眼斜杠
			oPen.arc(440,150,27,0,Math.PI*2,true);
			oPen.stroke();
			oPen.fillStyle='white';
			oPen.fill();
			oPen.closePath();
			
			oPen.moveTo(433,135);        // 右眼/
			oPen.lineTo(420,148);
			oPen.moveTo(422,147);
			oPen.lineTo(433,161);
			oPen.stroke();
			
			
			oPen.beginPath();
			oPen.arc(400,240,70,0,Math.PI,false);
			oPen.stroke();
			oPen.fillStyle='white';
			oPen.fill();
			oPen.closePath();
			
			oPen.beginPath();
			oPen.moveTo(380,240);
			oPen.lineTo(380,270);
			oPen.arcTo(380,275,375,275,5);
			oPen.lineTo(365,275);
			oPen.arcTo(360,275,360,270,5);
			oPen.lineTo(360,240);
			oPen.stroke();
			oPen.fillStyle='yellow';
			oPen.fill();
			oPen.closePath();
			
			oPen.beginPath();
			oPen.moveTo(360,240);
			oPen.lineTo(360,270);
			oPen.arcTo(360,275,355,275,5);
			oPen.lineTo(345,275);
			oPen.arcTo(340,275,340,270,5);
			oPen.lineTo(340,240);
			oPen.stroke();
			oPen.fillStyle='yellow';
			oPen.fill();
			oPen.closePath();
			
			oPen.beginPath();
			oPen.moveTo(400,240);
			oPen.lineTo(400,270);
			oPen.arcTo(400,275,395,275,5);
			oPen.lineTo(385,275);
			oPen.arcTo(380,275,380,270,5);
			oPen.lineTo(380,240);
			oPen.stroke();
			oPen.fillStyle='yellow';
			oPen.fill();
			oPen.closePath();
			
			oPen.beginPath();
			oPen.moveTo(450,240);
			oPen.lineTo(450,270);
			oPen.arcTo(450,275,445,275,5);
			oPen.lineTo(435,275);
			oPen.arcTo(430,275,430,270,5);
			oPen.lineTo(430,240);
			oPen.stroke();
			oPen.fillStyle='yellow';
			oPen.fill();
			oPen.closePath();
			
			
			
			 
		}
	</script>
</html>
